<template>
	<MainPage>
		<template #HeaderLeft>
			<el-form
				:inline="true"
				:model="form"
				class="demo-form-inline"
				ref="userListFrom"
				label-width="70px"
			>
				<el-form-item label="用户" prop="uid">
					<change-user-input
						ref="changeUserInput"
						@sendValue="(data) => getData(data, 1)"
						@clear="clear(1)"
					></change-user-input>
				</el-form-item>
				<el-form-item label="物品" prop="item_id">
					<change-goods-input
						ref="changeGoodsRef"
						url="2"
						@clear="clear(2)"
						@sendValue="(data) => getData(data, 2)"
					></change-goods-input>
				</el-form-item>

				<el-form-item>
					<el-button class="reset marginLeft10" type="primary" @click="reset"
						>重置</el-button
					>
					<el-button
						type="primary"
						@click="getArticleList"
						:loading="listLoading"
						>搜索</el-button
					>
				</el-form-item>
			</el-form>
		</template>
		<template #HeaderRight>
			<el-button v-repeatClick @click="handleExport"> 导出 </el-button>
		</template>
		<template #Table>
			<el-table
				ref="multipleTable"
				v-loading="listLoading"
				:data="list"
				element-loading-text="加载中"
				fit
				border
				highlight-current-row
				:span-method="objectSpanMethod"
				:cell-class-name="cellclassname"
			>
				<!-- <el-table-column
					label="序号"
					width="80"
					:show-overflow-tooltip="true"
				>
					<template slot="scope">
						{{ scope.$index + 1 }}
					</template>
				</el-table-column> -->
				<el-table-column
					label="用户名称"
					prop="nickname"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					label="物品名称"
					prop="goods_name"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					label="数量"
					prop="num"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					label="单价"
					prop="price"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					label="金额"
					prop="money"
					:show-overflow-tooltip="true"
				/>
			</el-table>
		</template>
		<template #Page>
			<el-pagination
				:current-page="current.page"
				:page-sizes="[20, 30, 50, 100]"
				:page-size="limit"
				layout="total, sizes, prev, pager, next, jumper"
				:total="totalCount"
				background
				@size-change="changeLimit"
				@current-change="changePage"
			/>
		</template>
	</MainPage>
</template>
<script>
	import MainPage from "@/components/MainPage";
	import {
		turnoverMember_index,
		turnoverMember_export,
	} from "@/api/warehouse/warehouseTurnOverBack";
	import { exportMethod } from "@/utils";

	export default {
		name: "",
		components: {
			MainPage,
		},
		data() {
			return {
				exportMethod,
				form: {
					uid: "",
					item_id: "",
				},
				list: [],
				listLoading: false,
				// 分页
				current: {
					page: 1,
					per_page: 20,
				},
				limit: 20,
				totalCount: 1,
				dialogVisible: false,
				addGoodsForm: {
					name: "",
					goods_spu_id: "",
				},
			};
		},
		methods: {
			objectSpanMethod({ row, column, rowIndex, columnIndex }) {
				if (columnIndex === 0) {
					if (row.row) {
						return {
							rowspan: row.row,
							colspan: 1,
						};
					} else {
						return {
							rowspan: 0,
							colspan: 0,
						};
					}
				}
			},
			cellclassname({ row, column, rowIndex, columnIndex }) {
				if (columnIndex === 0) {
					return "demo";
				}
			},
			getArticleList() {
				this.current.page = 1;
				this.turnoverMember_index();
			},
			reset() {
				this.$refs["userListFrom"].resetFields();
				this.$refs["changeUserInput"].name = "";
				if (this.$refs["changeGoodsRef"]) {
					this.$refs["changeGoodsRef"].name = "";
				}
				this.getArticleList();
			},
			// 分页
			changeLimit(pageSize) {
				this.current.per_page = pageSize;
				this.turnoverMember_index();
			},
			changePage(page) {
				this.current.page = page;
				this.turnoverMember_index();
			},
			getData(data, type) {
				if (type == 1) {
					this.form.uid = data.id;
				} else if (type == 2) {
					this.form.item_id = data.id;
				}
			},
			clear(type) {
				if (type == 1) {
					this.form.uid = "";
				} else if (type == 2) {
					this.form.goods_spu_id = "";
				}
			},
			deleteGoods() {
				this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				})
					.then(() => {})
					.catch(() => {});
			},
			turnoverMember_index() {
				this.listLoading = true;
				let data = Object.assign(this.form, this.current);
				turnoverMember_index(data).then((res) => {
					if (res.errcode == 0) {
						this.totalCount = res.data.count;

						let list = Object.values(res.data.list);
						let new_list = [];
						list.map((e) => {
							e.map((c, index) => {
								if (index == 0) {
									c.row = e.length;
								}
								new_list.push(c);
							});
						});

						new_list.map((e) => {
							e.nickname = `${e.member.nickname}`;
							e.goods_name = `${e.goods.name}【${e.goods_spu.spu_name.title}】`;
							e.unit_title = `${e.goods_spu.spu_unit.title}`;
							e.inventory_num = `${e.goods_spu.inventory.num}`;
							e.money = this.$toFixed(parseFloat(e.price) * parseFloat(e.num));
						});
						this.list = new_list;
					}
					this.listLoading = false;
				});
			},
			// 导出
			handleExport() {
				let data = JSON.parse(JSON.stringify(this.form));
				turnoverMember_export(data).then((res) => {
					if (res.code == 500) {
						this.$message.error("导出失败");
					} else {
						this.exportMethod(res, "未还统计");
					}
				});
			},
		},
		created() {
			this.turnoverMember_index();
		},
	};
</script>
<style lang='scss' scoped>
/deep/.demo {
	border-right: 1px solid #ebeef5 !important;
}
</style>
